<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<script src="js/ckeditor/ckeditor.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

	<title>Document Editor</title>
	<style type="text/css">
		/* Minimal styling to center the editor in this sample */
		body {
			padding: 30px;
			display: flex;
			align-items: center;
			text-align: center;
		}

		.main_container {
			margin: 0 auto;
		}
	</style>
</head>

<body>

	<div class="main_container">

		<h2><label for="editor1">Document Editor</label></h2>
		<textarea id="editor1">
		&lt;h2 style="text-align: center;"&gt;The Flavorful Tuscany Meetup&lt;/h2&gt;
		&lt;p style="text-align: center;"&gt;&lt;span style="color: #007ac9;"&gt;&lt;strong&gt;Welcome letter&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
		&lt;p&gt;Dear Guest,&lt;/p&gt;
		&lt;p&gt;We are delighted to welcome you to the annual &lt;em&gt;Flavorful Tuscany Meetup&lt;/em&gt; and hope you will enjoy the programme as well as your stay at the Bilancino Hotel.&lt;/p&gt;
		&lt;p&gt;Please find below the full schedule of the event.&lt;/p&gt;
		&lt;table class="schedule" cellpadding="15" cellspacing="0" style="border-collapse:collapse;width:100%;"&gt;
			&lt;thead&gt;
				&lt;tr&gt;
					&lt;th colspan="2" scope="col" style="background-color: #F2F9FF; text-align: center; font-size: 21px;"&gt;&lt;span&gt;Saturday, July 14&lt;/span&gt;&lt;/th&gt;
				&lt;/tr&gt;
			&lt;/thead&gt;
			&lt;tbody&gt;
				&lt;tr&gt;
					&lt;td style="white-space:nowrap;"&gt;&lt;span&gt;9:30 AM - 11:30 AM&lt;/span&gt;&lt;/td&gt;
					&lt;td&gt;&lt;span&gt;Americano vs. Brewed - “know your coffee” session with &lt;strong&gt;Stefano Garau&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td style="white-space:nowrap;"&gt;&lt;span&gt;1:00 PM - 3:00 PM&lt;/span&gt;&lt;/td&gt;
					&lt;td&gt;&lt;span&gt;Pappardelle al pomodoro - live cooking session with &lt;strong&gt;Rita Fresco&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
				&lt;/tr&gt;
				&lt;tr&gt;
					&lt;td style="white-space:nowrap;"&gt;&lt;span&gt;5:00 PM - 8:00 PM&lt;/span&gt;&lt;/td&gt;
					&lt;td&gt;&lt;span&gt;Tuscan vineyards at a glance - wine-tasting session with &lt;strong&gt;Frederico Riscoli&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
				&lt;/tr&gt;
			&lt;/tbody&gt;
		&lt;/table&gt;
		&lt;blockquote&gt;
			&lt;p&gt;The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!&lt;/p&gt;
			&lt;p&gt;Angelina Calvino, food journalist&lt;/p&gt;
		&lt;/blockquote&gt;
		&lt;p&gt;Please arrive at the Bilancino Hotel reception desk at least &lt;strong&gt;half an hour earlier&lt;/strong&gt; to make sure that the registration process goes as smoothly as possible.&lt;/p&gt;
		&lt;p&gt;We look forward to welcoming you to the event.&lt;/p&gt;
		&lt;p&gt;&lt;/p&gt;
		&lt;p&gt;&lt;strong&gt;Victoria Valc&lt;/strong&gt;&lt;/p&gt;
		&lt;p&gt;&lt;strong&gt;Event Manager&lt;/strong&gt;&lt;/p&gt;
		&lt;p&gt;&lt;strong&gt;Bilancino Hotel&lt;/strong&gt;&lt;/p&gt;
	</textarea>
	</div>
	<script>
		var editor = CKEDITOR.replace('editor1', {
			// Define the toolbar: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_toolbar
			// The full preset from CDN which we used as a base provides more features than we need.
			// Also by default it comes with a 3-line toolbar. Here we put all buttons in a single row.
			extraPlugins: 'uploadimages',
			// uploadUrl: 'http://127.0.0.1:9090/api/upload/webupload?command=QuickUpload&type=Files&responseType=json',

			// Configure your file manager integration. This example uses CKFinder 3 for PHP.
			// filebrowserBrowseUrl: 'http://127.0.0.1:9090/api/upload/webupload',
			// filebrowserImageBrowseUrl: 'http://127.0.0.1:9090/api/upload/webupload?type=Images',
			// filebrowserUploadUrl: 'http://127.0.0.1:9090/api/upload/webupload?command=QuickUpload&type=Files',
			// filebrowserImageUploadUrl: 'http://127.0.0.1:9090/api/upload/webupload?command=QuickUpload&type=Images',
			//http://127.0.0.1:9090/api/upload/webupload?command=QuickUpload&type=Files&responseType=json
			// The following options are not necessary and are used here for presentation purposes only.

			// Rearrange toolbar groups and remove unnecessary plugins.
			toolbarGroups: [
				{ name: 'document', groups: ['mode', 'document', 'doctools'] },
				{ name: 'clipboard', groups: ['clipboard', 'undo'] },
				{ name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },
				{ name: 'forms', groups: ['forms'] },
				{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
				{ name: 'colors', groups: ['colors'] },
				{ name: 'styles', groups: ['styles'] },
				'/',
				{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] },
				{ name: 'links', groups: ['links'] },
				{ name: 'insert', groups: ['insert'] },
				{ name: 'tools', groups: ['tools'] },
				{ name: 'others', groups: ['others'] },
				'/',
				{ name: 'about', groups: ['about'] }
			],
			removeButtons: 'Save,NewPage,Print,Templates,Cut,Copy,Paste,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Subscript,Superscript,Blockquote,CreateDiv,Anchor,Table,Iframe,PageBreak,About,Flash',



			// Since we define all configuration options here, let's instruct CKEditor to not load config.js which it does by default.
			// One HTTP request less will result in a faster startup time.
			// For more information check http://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-customConfig
			customConfig: '',

			// Sometimes applications that convert HTML to PDF prefer setting image width through attributes instead of CSS styles.
			// For more information check:
			//  - About Advanced Content Filter: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_advanced_content_filter
			//  - About Disallowed Content: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_disallowed_content
			//  - About Allowed Content: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_allowed_content_rules
			// disallowedContent: 'img{width,height,float}',
			// extraAllowedContent: 'img[width,height,align]',
			//allowedContent: 'p abbr[title,id]',
			//临时先通过所有内容
			allowedContent: true,

			// Enabling extra plugins, available in the full-all preset: http://ckeditor.com/presets-all
			//extraPlugins: 'tableresize,uploadimage,uploadfile',

			/*********************** File management support ***********************/
			// In order to turn on support for file uploads, CKEditor has to be configured to use some server side
			// solution with file upload/management capabilities, like for example CKFinder.
			// For more information see http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_ckfinder_integration

			// Uncomment and correct these lines after you setup your local CKFinder instance.
			// filebrowserBrowseUrl: 'http://example.com/ckfinder/ckfinder.html',
			// filebrowserUploadUrl: 'http://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
			/*********************** File management support ***********************/

			// Make the editing area bigger than default.
			height: 800,

			// An array of stylesheets to style the WYSIWYG area.
			// Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
			contentsCss: ['https://cdn.ckeditor.com/4.8.0/full-all/contents.css', 'mystyles.css'],

			// This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
			bodyClass: 'document-editor',

			// Reduce the list of block elements listed in the Format dropdown to the most commonly used.
			format_tags: 'p;h1;h2;h3;pre',

			// Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
			removeDialogTabs: 'image:advanced;link:advanced',

			// Define the list of styles which should be available in the Styles dropdown list.
			// If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"
			// (and on your website so that it rendered in the same way).
			// Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor from loading
			// that file, which means one HTTP request less (and a faster startup).
			// For more information see http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_styles
			stylesSet: [
				/* Inline Styles */
				{ name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },
				{ name: 'Cited Work', element: 'cite' },
				{ name: 'Inline Quotation', element: 'q' },

				/* Object Styles */
				{
					name: 'Special Container',
					element: 'div',
					styles: {
						padding: '5px 10px',
						background: '#eee',
						border: '1px solid #ccc'
					}
				},
				{
					name: 'Compact table',
					element: 'table',
					attributes: {
						cellpadding: '5',
						cellspacing: '0',
						border: '1',
						bordercolor: '#ccc'
					},
					styles: {
						'border-collapse': 'collapse'
					}
				},
				{ name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
				{ name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } }
			]
		});



		//监听黏贴word事件
		//在正式环境无法根据本地文件名进行上传操作。而且js无权限通过本地文件名操作文件。所以如果遇到paste有file协议的文件图片，给个占位符，提示无法上传即可
		editor.on('paste', function (evt) {
			// console.log(evt.data.$.clipboardData.items);
			// console.log('aa')
			// console.log(evt.data.dataTransfer);
			// console.log('---')
			// console.log(evt.data.dataTransfer.getData('text/html'));
			for (var i = 0; i < evt.data.dataTransfer.getFilesCount(); i++) {
				var file = evt.data.dataTransfer.getFile(i);
				//拿到文件后可通过FileReader去上传，通过webUpload接口
				console.log(file);
				if (CKEDITOR.fileTools.isTypeSupported(file, /image\/(png|jpeg|jpg)/)) {
					//获取到src组装html插入
					var ele = CKEDITOR.dom.element.createFromHtml('<p style="padding:5px 0;"><img style="max-width: 100%;width:500px" src="http://image.domolife.cn/platform/Gz6GPZhmtZ1550197582665.jpg"/></p>');
					editor.insertElement(ele);  
				}
			}


		var htmlStr = evt.data.dataTransfer.getData('text/html');
		// console.log("htmlStr:" + htmlStr);
		var repalceHtml = '';
		if (htmlStr) {
			//循环遍历word内容，建议不要循环调用uploadImageFormWord接口，而是一次性凑齐要替换的file url，再调用接口最后统一替换
			//从word复制过来上传过程中，可能会需要点时间处理，这时前端需要给提示上传中，并且不让用户操作
			$(htmlStr).each(function (obj) {
				var imgFileObj = $(this).find('img');

				var imgFileSrc = imgFileObj.attr('src');

				if (imgFileSrc != 'undefined' && typeof (imgFileSrc) != 'undefined') {
					if (imgFileSrc.indexOf('file') != -1) {
						var httpImgUrl = '';
						console.log(imgFileSrc)
						$.ajax({
							url: "http://xx.xx.xxxx/xx/upload/uploadImageFromWord",
							async: false,
							data: { files: imgFileSrc },
							type: "POST",
							success: function (e) {
								httpImgUrl = e.result[0];
							}
						})
						var replaceImg = '<img width="400px" height="400px" src="' + httpImgUrl + '">';
						$(this).html(replaceImg);

					}
				}
				repalceHtml += $(this).prop("outerHTML");
			})
			console.log(repalceHtml);
			// console.log($(htmlStr).html());
			// console.log($(htmlStr));
			// var obj = $(htmlStr).find('img');
			// console.log($(obj))
			// $(obj).attr("src", "http://image.domolife.cn/platform/Gz6GPZhmtZ1550197582665.jpg");
			// console.log($(htmlStr).find('img'))
			// console.log($(htmlStr));
		}
		evt.data.dataValue = repalceHtml;
		evt.data.type = 'html';
			// evt.data.dataTransfer.setData( 'text/html',  '<div>123</div>' )
			
		
		})
// 		CKEDITOR.instances["editor1"].on('instanceReady', function(e) {
//     this.document.on("paste", function(e) {
// 		var items = e.data.$.clipboardData.items;
// 		console.log(items)
//         for(var i = 0; i < items.length; ++i) {
// 			var item = items[i];
// 			console.log(item)
// 			if (item.kind == 'string' && item.type == 'text/html') {
// 				var str = items.getData( 'text/html' );
// 				console.log(str)
// 			}
//             // if(item.kind == 'file' && item.type == 'image/png') {
//             //     var imgFile = item.getAsFile();
//             //     if(!imgFile) {
//             //         return true;
//             //     }
//             //     var reader = new FileReader();
//             //     reader.readAsDataURL(imgFile);
//             //     reader.onload = function(e) {
//             //         //显示文件  
//             //         CKEDITOR.instances["editor1"].insertHtml('<img src="' + this.result + '" alt="" />');
//             //     }
//             //     return false;
//             // }
//         }
//     });
// });


	</script>
	<script type="text/javascript" src="lib/plupload-2.1.2/js/plupload.full.min.js"></script>
	<script src="js/ckeditor/plugins/uploadimages/dialog/upload.js"></script>
</body>

</html>